<template>
	<view @click.once="pushState" class="content">
		<view class="top-content box">
			<image class="banner" src="@/static/home-step.png" mode="widthFix"></image>
			<view class="borrow-text">
				你想借多少？
			</view>
				<view class="borrow-input">
					<input class="amount" v-model="amount" />
					<view class="borrow-options">
						<text class="all" @click="handleClickApply">
							全部借出
						</text>
						<text class="amount-text">
							（金额可修改）
						</text>
						<uni-icons color="#7B797B" @click="amount = ''" :size="21" type="closeempty"></uni-icons>
					</view>
				</view>
				<view class="borrow-method">
					<view class="item">
						<view class="label">
							借款期限
						</view>
						<view class="value">
							可选3,6,12,36期
						</view>
					</view>
					<view class="item">
						<view class="label">
							还款方式
						</view>
						<view class="value">
							随借随还
							<view class="val-desc">
								具体方式需根据最终资方而定
							</view>
						</view>
					</view>
				</view>
			
		</view>
		<view class="phone-input box">
			<input type="number" v-model="mobile" class="phone" placeholder="请输入手机号" />
			<Mbutton @click="handleClickApply" radius="10px"  >立即申请</Mbutton>
			<view class="xieyi">
				<!-- <image src="../../static/checked.png" mode="widthFix"></image> -->
				<radio style="transform:scale(0.7)" color="#2F53EE" @click="protocolChecked=!protocolChecked" :checked="protocolChecked" />我已同意并阅读
				<text @click="toPage('用户授权')" class="link">《用户服务协议》</text>
				 <text @click="toPage('隐私政策')" class="link">《隐私政策》</text>
			</view>
		</view>
		<div class="trends">
			<div class="trends-title">最新动态</div>
			<div class="trends-list">
				<div class="trends-item">
					<div class="left">
						<div class="row1">
							<image src="@/static/trends1.png" class="avatar" mode="widthFix"></image>
							<div class="user">
								<span>刘先生</span>
								<span>138****7459</span>
							</div>
						</div>
						<div class="row2">
							<div class="times">
								申请时间：2024-07-05
							</div>
							<div class="times">
								通过时间：2024-07-05
							</div>
						</div>
					</div>
					<div class="right">
						<view class="pi-amount">
							120000
						</view>
						<view class="pi-text">
							获批额度
						</view>
					</div>
				</div>
				
				
				<div class="trends-item">
					<div class="left">
						<div class="row1">
							<image src="@/static/trends2.png" class="avatar"  mode="widthFix"></image>
							<div class="user">
								<span>赵女士</span>
								<span>136****5698</span>
							</div>
						</div>
						<div class="row2">
							<div class="times">
								申请时间：2024-07-05
							</div>
							<div class="times">
								通过时间：2024-07-05
							</div>
						</div>
					</div>
					<div class="right">
						<view class="pi-amount">
							300000
						</view>
						<view class="pi-text">
							获批额度
						</view>
					</div>
				</div>
				
			</div>
			
		</div>
		
		<view class="bottom-desc">
			本平台为金融信息服务平台 <br>
			贷款资金由合作持牌机构提供，合作机构年化利率低于24%具体放款时间和金额视个人情况而定<br>
			贷款有风险，借款需谨慎，请合理消费、避免逾期<br>
			平台提醒：官方不会以任何名字向您收取手续费，一切贷前收取手续费的均有可能是诈骗<br>
			<!-- <navigator url="/pages/index/rights" >
				<view  class="quanyi" >
					 <image class="img" src="/static/rights/消费者权益保护图标.png"  mode="widthFix"></image> <text>消费权益保护</text>
				</view>
			</navigator> -->
		</view>
		
	</view>
	<mPopup title='服务授权' v-model="showPopup" @confirm="showSendCode=true" confirmText="同意协议并提交" > 
		<div class="xieyi-pop-box">
			请仔细阅读 <text @click="toPage('注册服务')" class="link">《注册协议》</text> <text @click="toPage('个人隐私')" class="link">《隐私协议》</text>
			点击同意协议并提交即代表您同意继续为您提交申请
		</div>
	</mPopup>
	<!-- 返回监听 -->
	<mPopup title='即将完成申请' v-model="showBackPopup" confirmText="继续申请" >
		<div style="height: 4em;">
			仅需1分钟就可完成申请啦，让我们继续申请吧！
		</div>
	</mPopup>
	
	<sendCode v-model="showSendCode" :mobile="mobile" @confirm="codeLogin" />

</template>

<script setup>
import { ref, watchEffect } from 'vue';
import {myRequest} from '@/util/api.js'
import {onLoad,onUnload,onHide} from '@dcloudio/uni-app'
import Mbutton from '@/components/Mbuttom.vue'
import mPopup from '@/components/mPopup.vue';
import sendCode from './modules/sendCode.vue';
const showPopup = ref(false)
const showBackPopup = ref(false)
	const amount = ref(200000);
	const mobile = ref('')
	const protocolChecked = ref(true)
	
	watchEffect(() => {
		amount.value = formatNumber(amount.value)
	})
	
	function formatNumber(n){
		if(typeof n === 'string'){
			n = n.replaceAll(',','')
			n = n.replaceAll('¥','')
		}
		return  Number(n).toLocaleString()
	}
	
	//点击申请
	function handleClickApply(){
		if(mobile.value.length != 11){
			return uni.showToast({
				icon:'none',
				title:'请输入正确的手机号'
			}) 
		}
		if(!protocolChecked.value){
			return uni.showToast({
				icon:'none',
				title:'请先勾选相关协议'
			})
		}
		 showSendCode.value = true
	}
	function toPage(name){
		uni.navigateTo({
			url:'/pages/webview/webview?name='+name
		})
	}
	
	
	async function codeLogin(codeValue) {
		console.log('codeValue',codeValue)
		codeValue = codeValue.slice(0,6)
		showSendCode.value = false
		const phone = mobile.value
		
			if (phone.length != 11) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'error'
				})
				return;
			}
			
			const res = await myRequest({
				url: 'api/member/login',
				method: 'post',
				data: {
					'mobile': phone,
					'loginType': 0, //0是验证码，1是快捷，3无验证码登录
					'loginCode': codeValue,
				}
			});
			uni.setStorageSync('token_mobile', phone);
			uni.setStorageSync('token', res.token);
		
			// var pageType = uni.getStorageSync('pageType')
		
			// if (pageType == 'h5_auth_list' || pageType == 'h5_auth_download') {
		
		
				let authFlag = res.authFlag
		
				// console.log('authFlag=' + res.authFlag)
				if (authFlag == 1) {
					//ios暂时不用app
				
						uni.redirectTo({
							url: './result'
						})
						
		
				} else {
					uni.redirectTo({
						url: './form'
					})
				}
		
		
		
		
		
	}
	
	
	//验证码
	const showSendCode = ref(false)
	
	
	
	
	// myRequest({
	// 	url: 'api/sms/sendSmsCode',
	// 	method: 'post',
	// 	data: {
	// 		'mobile': '123343',
	// 		'operType': '0'
	// 	}
	// });
	
	
	
	//返回监听
	function pushState(){
		// #ifdef H5
		history.pushState({},'')
		// #endif
	}
// #ifdef H5

	onLoad(() => {
		initLoad()
		window.onpopstate = () => {
				showPopup.value = false
			showBackPopup.value = true
		}
	})
	onUnload(() => window.onpopstate = null)
	onHide(() => window.onpopstate = null)
// #endif
	
	
	function getRequestParams() {
		let url = location.href;
		let requestParams = {};
		if (url.indexOf("?") !== -1) {
			let str = url.substr(url.indexOf("?") + 1); //截取?后面的内容作为字符串
			// console.log(str, '?后面的内容');
			let strs = str.split("&"); //将字符串内容以&分隔为一个数组
			// console.log(strs, '以&切割的数组');
			for (let i = 0; i < strs.length; i++) {
				requestParams[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
				// 将数组元素中'='左边的内容作为对象的属性名，'='右边的内容作为对象对应属性的属性值
			}
		}
		// console.log(theRequest, "处理后的对象");
		return requestParams;
	}
	
	let randomStr,
	channelCode;
	
	async function  initLoad() {
				
			
			
				let params = getRequestParams();
				 channelCode = params["ch"];
				// console.log(channelCode)
				if (channelCode.substring(channelCode.length - 2, channelCode.length) == '#/') {
					channelCode = channelCode.substring(0, channelCode.length - 2)
				}
			// 	if (channelCode == 'NIJNVS') {
			// 		this.zcshow = false
			
			// 	}
				let jcid = params["jcid"];
				uni.setStorageSync('jcid', jcid);
			
				let bdVid = params["bd_vid"];
				uni.setStorageSync('bdVid', bdVid);
				let szRli = params["sz_rli"];
				uni.setStorageSync('szRli', szRli);
			
				let uid = params["uid"] || params["u"];
				// if (uid != null) {
				// 	this.isLd = true
				// }
				 randomStr = params["r"];
				if (channelCode != null) {
					uni.setStorageSync('channelCode', channelCode);
				}
				// var qqorwx = this.getBrowser()
				// if (qqorwx == 'qq' || qqorwx == 'wechat') {
				// 	this.count(1)
				// 	//这里加个微信 qq屏蔽开关
				// 	// uni.redirectTo({
				// 	// 	url: '../empty/empty'
				// 	// })
				// } else {
				// 	this.count(0)
				// }
				count(0)
			
			
			
				uni.setStorageSync('homewindow', true)
			
			
				// getPageType(uid)
			}
			function count(e) {
				
				myRequest({
					url: 'api/sys/count',
					method: 'post',
					data: {
						'operType': 5,
						'dataId': randomStr,
						'dataInfo': navigator.userAgent,
						'dataExt': e

					}

				})
			}
	
</script>

<style lang="scss">
.content{
	position: relative;
	background-color: #F8F8F8;
	padding-top: 25rpx;
	.box{
		background-color: #fff;
		border-radius: 12px;
		padding: 20rpx;
		margin: 0rpx 25rpx ;
	}
	.top-content{
		.banner{
			width: 100%;
		}
		.borrow-text{
			font-size: 24rpx;
			color: #8F8C8F;
			margin-top: 10rpx;
			margin-bottom: 20rpx;
		}
		.borrow-input{
			display: flex;
			align-items: center;
			border-bottom: 1px solid #D8D8D8;
			padding-bottom: 10rpx;
			.amount{
				font-size: 75rpx;
				color: #232532;
				font-weight: bold;
			}
			.borrow-options{
				display: flex;
				align-items: center;
				font-size: 24rpx;
				flex-shrink: 0;
				.all{
					color: #0256FF;
				}
				.amount-text{
					color: #7B797B;
				}
			}
		}
		.borrow-method{
			background-color: #F8F8FA;
			padding: 20rpx;
			margin: 24rpx 0;
			border-radius: 12px;
			.item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				&:first-child{
					margin-bottom: 40rpx;
				}
				.label{
					color: #202020;
					font-weight: 500;
					font-size: 28rpx;
				}
				.value{
					text-align: right;
					color: #514F52;
					font-size: 24rpx;
					.val-desc{
						color: #8F8C8F;
						font-size: 20rpx;
					}
				}
			}
		}
		
		
	}
	.phone-input{
		margin-top: 20rpx;
		.phone{
			background-color: #F8F8FA;
			border-radius: 10px;
			padding: 30rpx 20rpx;
			margin-bottom: 20rpx;
		}
		.xieyi{
			color: #9C9E9C;
			font-size: 22rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 20rpx;
			
			image{
				width: 26rpx;
				margin-right: 4px;
			}
		}
	}
	

	.bottom-desc{
		text-align: center;
		color: #a9adb8;
		font-size: 24rpx;
		padding: 40rpx 20rpx;
		.quanyi{
			display: flex;
			align-items: center;
			 color:#f5c437;
			 justify-content: center;
			 padding: 10px;
			.img{
				width: 40rpx;
				margin-right: 5rpx;
			}
		}
		
	}
	.link{
		color: #134DB8;
	}
}
.trends{
		padding:15px;
		.trends-title{
				color: #333333;
				font-size: 16px;
				font-weight: 500;
		}
		.trends-list{
			margin-top: 14px;
			display: flex;
			overflow: scroll;
			
			.trends-item{
				flex-shrink: 0;
				display: flex;
				width: 230px;
				background-color: #fff;
				border-radius: 10px;
				justify-content: space-around;
				align-items: center;
				padding: 10px;
				margin-right: 14px;
				.left{
					.row1{
						display: flex;
						align-items: center;
					}
					.row2{
						color: #999;
						font-size: 12px;
						margin-top: 8px;
					}
					.user{
						margin-left: 10px;
						display: flex;
						align-items: center;
						flex-direction: column;
						
						span:nth-child(1){
							color: #333333;
							font-size: 12px;
						}
						span:nth-child(2){
							color: #999;
							font-size: 10px;
						}
					}
				}
				.right{
					.pi-amount{
						color: #D34E4A;
						font-size: 36rpx;
						font-weight: 500;
					}
					.pi-text{
						color: #999999;
						font-size: 20rpx;
					}
				}
			}
			.avatar{
				width: 34px;
			}
			.left{
				
			}
			.right{
				image{
					width: 60px;
				}
			}
			
			
		}
	}
</style>
